<template>
  <z-space direction="vertical">
    <z-dropdown-button type="primary" loading>
      <template #overlay>
        <z-menu>
          <z-menu-item key="1">Submit and continue</z-menu-item>
        </z-menu>
      </template>
      Submit
    </z-dropdown-button>
    <z-dropdown-button type="primary" size="small" loading>
      <template #overlay>
        <z-menu>
          <z-menu-item key="1">Submit and continue</z-menu-item>
        </z-menu>
      </template>
      Submit
    </z-dropdown-button>
    <z-dropdown-button type="primary" :loading="loading1" @click="enterLoading1">
      <template #overlay>
        <z-menu>
          <z-menu-item key="1">Submit and continue</z-menu-item>
        </z-menu>
      </template>
      Submit
    </z-dropdown-button>
    <z-dropdown-button :loading="loading2" @click="enterLoading2">
      Submit
      <template #overlay>
        <z-menu>
          <z-menu-item key="1">Submit and continue</z-menu-item>
        </z-menu>
      </template>
      <template #icon><DownOutlined /></template>
    </z-dropdown-button>
  </z-space>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const loading1 = ref(false)
    const loading2 = ref(false)
    const enterLoading = loading => {
      loading.value = true
      setTimeout(() => {
        loading.value = false;
      }, 6000)
    }
    return {
      loading1,
      loading2,
      enterLoading1() {
        enterLoading(loading1)
      },
      enterLoading2() {
        enterLoading(loading2)
      }
    }
  }
})
</script>
